<template>
    <div style="padding: 20px;position: relative;height: 100vh;">
        <div class="topic-container">
            <div class="topic-item" v-for="(item,index) in page.records" :key="index">
                <div class="topic-item-name">{{ item.name }}</div>
                <div class="topic-item-info">总分：{{ item.totalScore }}</div>
                <div class="topic-item-info">得分：{{ item.result }}</div>
                <div class="topic-item-option">
                    <i-button :level="'info'" @click.native="joinTopic(item)">立即参与</i-button>
                </div>
            </div>

        </div>
        <div style="position: absolute;bottom: 0;width: 96%">
            <i-page style=";" :current="page.current" :size="page.size" :total="page.total" @change-page="changePage"></i-page>
        </div>
        
    </div>
</template>

<script>
import IButton from '@/components/plugs/i-button/IButton.vue'
import IPage from '@/components/plugs/i-page/IPage.vue';
import {get,post} from '@/utils/api.js'
export default {
    data(){

        return{
            page:{
                current:1,
                size:4,
                total:0,
                records:[
                    // {name:'测试能测1',totalScore:100,result:0},
                    // {name:'测试能测1',totalScore:100,result:0},
                    // {name:'测试能测1',totalScore:100,result:0},
                    // {name:'测试能测1',totalScore:100,result:0},
                ]
            }
        }
    },
    methods:{
        getPage(){

            const promise = get({
                url:'/base-topic/front/test-topic/page',
                params:{current:this.page.current,size:this.page.size}
            });

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.page = res.data;
                }
            })

        },
        joinTopic(topic){
            if(topic.join){
                this.$message.error('你已经参与过这个能测了');
                return;
            }

            this.$router.push(`/topic/details/${topic.id}`)

        },
        changePage(page){
            this.page.current = page.current;
            this.page.size = page.size;
            document.documentElement.scrollTop = 0;
            this.getPage();
        }

    },
    components:{
        IButton,
        IPage

    },
    created(){
        this.getPage();
    }

}
</script>

<style scoped>
.topic-container{
    /* height: 96vh; */
    background-color: #fff;
    
}
.topic-item{
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #dcdfe6;
    
}
.topic-item-name{
    height: 40px;
    font-size: 20px;
    font-weight: 600;
}

.topic-item-info{
    font-size: 16px;
    height: 36px;
    line-height: 36px;
    color: #999;
}
.topic-item-option{
    display: flex;
    justify-content: flex-end;
}

</style>

